<template>
  <div style="position: relative; height: 99.9%">
    <breadcrumb></breadcrumb>
    <div class="Box">
      <div class="header">
        <h2 style="
            font-size: 16px;
            color: #262626;
            font-family: MicrosoftYaHei-Bold;
          ">
          批量建单
        </h2>
      </div>
      <div class="main">
        <!-- 交易信息板块 -->
        <div class="main_item">
          <titleBgVue :title="'交易信息'"></titleBgVue>
          <div class="formItem">
            <el-form :model="formData" :rules="transactionRules" ref="formData" label-width="117px" class="input_form">
              <el-row style="width: 100%">
                <el-col :span="8">
                  <el-form-item label="货源方" prop="ownerId">
                    <el-input :readOnly="true" size="small" v-model="transactionForm.huozhu" placeholder="请选择货源方">
                      <template slot="append">
                        <div style="cursor: pointer" @click="Selectcargoe">
                          选择货主
                        </div>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="项目名称" prop="projectId">
                    <el-input :readOnly="true" size="small" v-model="transactionForm.name" placeholder="请选择项目">
                      <template slot="append">
                        <div style="cursor: pointer" @click="Selectitem">
                          选择项目
                        </div>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="计划名称" prop="ownerProject">
                    <el-select size="small" v-model="transactionForm.plan" placeholder="请选择">
                      <el-option v-for="item in planArr" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="计价方式" prop="pricingMethod">
                    <el-select size="small" v-model="formData.pricingMethod" placeholder="请选择">
                      <el-option v-for="item in jijiaArr" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="计量单位" prop="measureUnit">
                    <el-select size="small" v-model="formData.measureUnit" placeholder="请选择" @change="changeMeasureUnit">
                      <el-option v-for="item in jiliangdawei" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="运量" prop="cargoWeight">
                    <el-input size="small" v-model="formData.cargoWeight" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="货主单价" prop="ownerUnitPrice">
                    <el-input size="small" v-model="formData.ownerUnitPrice" placeholder="请输入金额">
                      <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                        元
                      </div>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="货主金额" prop="totalAmount">
                    <el-input size="small" v-model="formData.totalAmount" placeholder="请输入金额">
                      <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                        元
                      </div>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="司机单价" prop="unitPrice">
                    <el-input size="small" v-model="formData.unitPrice" placeholder="请输入金额">
                      <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                        元
                      </div>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="司机运费" prop="freight">
                    <el-input size="small" v-model="formData.freight" placeholder="请输入运费">
                      <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                        元
                      </div>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="发货时间" prop="shippedTime">
                    <el-date-picker size="small" v-model="formData.shippedTime" value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div class="main_item">
          <titleBgVue :title="'调度信息'"></titleBgVue>
          <button style="margin-bottom: 15px" type="button" @click="showAddDriver()" class="addDriverBtn">
            选择线路
          </button>
          <button class="addRouteBtn" @click="showAddRouteDialog()">
            <i class="el-icon-plus iconBtn"></i>
            <span>添加线路</span>
          </button>
          <div class="tableBox">
            <el-table :header-cell-style="tableHeaderStyle" :data="setOutTableData" :row-class-name="rowStyle"
              ref="multipleTable">
              <el-table-column align="left" prop="" width="50" label="序号">
                <template slot-scope="scope">
                  <div>
                    {{ scope.$index + 1 }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="路线名称" prop="lineName">
              </el-table-column>
              <el-table-column align="center" label="发货地" prop="startAddress">
                <template slot-scope="scope">
                  <div class="addressStyle" style="color: #1890ff"
                    @click="getEmitRouteDetails(scope.row.lineId, scope.$index)">
                    {{ scope.row.startAddress }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="目的地" prop="endAddress">
                <template slot-scope="scope">
                  <div class="addressStyle" style="color: #1890ff"
                    @click="getEmitRouteDetails(scope.row.lineId, scope.$index)">
                    {{ scope.row.endAddress }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="司机姓名">
                <template slot-scope="scope">
                  <div v-for="(item, i) in scope.row.mood" :key="i">
                    {{ item.driverName }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="车辆信息">
                <template slot-scope="scope">
                  <div v-for="(item, i) in scope.row.mood" :key="i">
                    {{ item.vehicleInfo }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="运量">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.cargoWeight" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="司机运费(元）">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.freight" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="货物明细">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="cargoVisible(scope.$index)">编辑货物明细</el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <!--  <el-button type="text" size="small" @click="getEmitRouteDetails(scope.row.lineId,scope.$index)">编辑线路</el-button> -->
                  <el-button type="text" size="small" @click="showAddDriverDialog(scope.$index)">调换司机</el-button>
                  <el-button type="text" size="small" @click="DeletCargo(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="footerControlBox">
      <el-button class="cancelBtn">取消</el-button>
      <el-button class="submitBtn" type="primary" @click="Submit('formData')">提交</el-button>
    </div>

    <!-- 货物明细弹框 -->
    <el-dialog title="编辑货物明细" :visible.sync="cargoDetailsVisible" width="1000px" class="cargoDetails_dialog">
      <div class="head">
        <el-upload ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :before-upload="upload"
          :show-file-list="false" accept=".xlsx,.xls" style="width: 150px; display: inline-flex">
          <el-button class="importBtn" type="primary">导入excel文档</el-button>
        </el-upload>
        <el-button class="importBtn1" type="warning" @click="Download">下载excel模板</el-button>
        <el-button class="importBtn1" type="success" @click="AddHuo">添加货物信息</el-button>
      </div>

      <div class="tableBox" v-if="setOutTableData.length > 0">
        <el-table class="cargoDetails_table" :data="setOutTableData[EndIndex].orderCargoDetails"
          :header-row-style="{ height: '40px', backgroundColor: 'red' }"
          :row-style="{ color: '#666666', fontSize: '12px' }">
          <el-table-column align="left" prop="" width="50" label="序号">
            <template slot-scope="scope">
              <div>
                {{ scope.$index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="大类">
            <template slot-scope="scope">
              <el-select v-model="scope.row.cargoType" placeholder="请选择">
                <el-option v-for="item in LargeCategoryArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="货物名称">
            <template slot-scope="scope">
              <el-input v-model="scope.row.cargoName"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="运量">
            <template slot-scope="scope">
              <el-input v-model="scope.row.cargoWeight"> </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="品牌">
            <template slot-scope="scope">
              <el-input v-model="scope.row.brand"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="规格">
            <template slot-scope="scope">
              <el-input v-model="scope.row.cargoVolume"> </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="数量">
            <template slot-scope="scope">
              <el-input v-model="scope.row.cargoQuantity"> </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="备注">
            <template slot-scope="scope">
              <el-input v-model="scope.row.description"> </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <i class="iconfontcolor icon-a--" @click="DeleteIndex(scope.$index)"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="dialog_footer">
        <el-button class="cancelBtn3" @click="cargoDetailsVisible = false">取消</el-button>
        <el-button class="submitBtn3" type="primary" @click="cargoDetailsVisible = false">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="货主信息" :visible.sync="DialogVisible" center class="fpkp-dialog">
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input placeholder="请输入货主名" clearable v-model="key">
          </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('货主信息')">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="cargoemood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="cargoemood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="name" label="货主名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="cargoeXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
          <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
          </el-pagination>
        </div> -->
    </el-dialog>

    <el-dialog title="项目信息" :visible.sync="DialogItem" center class="fpkp-dialog">
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input v-model="projectNameValue" placeholder="请输入项目名" clearable> </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('项目信息')">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="itemmood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="itemmood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="name" label="项目名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="ItemXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
          <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
          </el-pagination>
        </div> -->
    </el-dialog>

    <el-dialog title="选择线路" :visible.sync="selectRouteVisble">
      <div class="controlLine">
        <!-- 车牌号 -->
        <div class="inputItem">
          <div class="title">路线名称</div>
          <div class="inputBox">
            <el-input v-model="searchLineName" @keyup.enter.native="showAddDriver">
            </el-input>
          </div>
        </div>
        <!-- 查询 -->
        <el-button type="primary" size="small" icon="el-icon-search" @click="showAddDriver">查询</el-button>
        <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="clearShowAddDriver">清空</el-button>

      </div>
      <div class="tableBox" style="width: 100%">
        <el-table class="selectRouteTable" style="width: 100%" :header-cell-style="tableHeaderStyle40"
          :row-class-name="rowStyle" :data="Linemood" ref="iframe" id="selectRouteBox">
          <el-table-column align="center" type="selection"> </el-table-column>
          <el-table-column align="center" width="50" label="序号">
            <template slot-scope="scope">
              <div>
                {{ scope.$index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="路线名称" prop="lineName">
          </el-table-column>
          <el-table-column align="center" label="发货地" prop="startAddress">
            <template slot-scope="scope">
              <div v-if="scope.row.startAddress.length != 0">
                <div v-for="(item, i) in scope.row.startAddress" :key="i">{{ item }}</div>
              </div>
              <div v-else>无</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="目的地" prop="endAddress">
            <template slot-scope="scope">
              <div v-if="scope.row.startAddress.length != 0">
                <div v-for="(item, i) in scope.row.endAddress" :key="i">{{ item }}</div>
              </div>
              <div v-else>无</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="dialog_footer" style="
          width: 100%;
          display: flex;
          justify-content: flex-end;
          margin-top: 24px;
        ">
        <el-button class="cancelBtn3" @click="selectRouteVisble = false">取消</el-button>
        <el-button class="submitBtn3" type="primary" @click="serMap">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="车队信息" :visible.sync="DialogAcceptList" center class="fpkp-dialog">
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="Acceptmood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="Acceptmood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="fleetName" label="车队名称" align="center"></el-table-column>
        <el-table-column label="车队地址" align="center">
          <template slot-scope="scope">
            {{ scope.row.region }}/{{ scope.row.address }}
          </template>
        </el-table-column>
        <el-table-column prop="driverNum" label="司机数量" align="center"></el-table-column>
        <el-table-column prop="vehicleNum" label="车辆数量" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="AcceptXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 添加司机弹框 -->
    <el-dialog title="添加司机" :visible.sync="addDriverVisible" width="840px" class="addDriver_dialog">
      <div class="titleBox">
        <div class="title">承运方当前可调动司机：</div>
      </div>
      <div class="dialog_list">
        <el-table :data="driverDetailsData" style="width: 100%" header-align="left"
          :row-style="{ color: '#595959', fontSize: '12px' }" ref="registTable" highlight-current-row>
          <el-table-column align="left" type="selection" width="50"></el-table-column>
          <el-table-column align="left" prop="" width="50" label="序号">
            <template slot-scope="scope">
              <div>
                {{ scope.$index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="driverPic" label="司机照片">
            <template slot-scope="scope">
              <div class="driverPicBox">
                <el-image style="width: 65px; height: 48px" :src="scope.row.driverPhoto"
                  :preview-src-list="[scope.row.driverPhoto]">
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="司机姓名">
            <template slot-scope="scope">
              <el-popover placement="bottom-start" width="505" trigger="click" class="popover"
                @show="diverShow(scope.row.driverId)">
                <!-- 司机信息和车辆信息 -->
                <div class="BulletBox" v-if="diverMood">
                  <div class="info_item">
                    <div class="titleBox">
                      <div class="icon-xinxi iconfontcolor"></div>
                      <h3 class="title">司机信息</h3>
                      <div class="line"></div>
                    </div>
                    <el-descriptions class="driverCarInfo" :column="2" :labelStyle="{
                      color: '#939393',
                      fontSize: '12px',
                      fontWeight: 'bold',
                      marginRight: '20px',
                    }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
                      <el-descriptions-item label="司机姓名">{{
                        diverMood.driverName
                      }}</el-descriptions-item>
                      <el-descriptions-item label="准驾车型">{{
                        diverMood.licenseLevel.message
                      }}</el-descriptions-item>
                      <el-descriptions-item label="身份证号">{{
                        diverMood.idCard
                      }}</el-descriptions-item>
                      <el-descriptions-item label="司机年龄">{{
                        scope.row.age
                      }}</el-descriptions-item>
                    </el-descriptions>
                  </div>
                  <div class="info_item">
                    <div class="titleBox">
                      <div class="icon-xinxi iconfontcolor"></div>
                      <h3 class="title">车辆信息</h3>
                      <div class="line"></div>
                    </div>
                    <el-descriptions class="driverCarInfo" :column="2" :labelStyle="{
                      color: '#939393',
                      fontSize: '12px',
                      fontWeight: 'bold',
                      marginRight: '20px',
                    }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
                      <el-descriptions-item label="车辆类型">{{
                        diverMood.vehicleType
                      }}</el-descriptions-item>
                      <el-descriptions-item label="车牌号">{{
                        diverMood.numberplate
                      }}</el-descriptions-item>
                      <el-descriptions-item label="品牌型号">{{
                        diverMood.brandModel
                      }}</el-descriptions-item>
                      <el-descriptions-item label="规格">{{
                        diverMood.specification
                      }}</el-descriptions-item>
                      <el-descriptions-item label="参数">{{
                        diverMood.diverMood
                      }}</el-descriptions-item>
                    </el-descriptions>
                  </div>
                </div>
                <div class="driverNameBox" slot="reference">
                  <div class="driverName" style="color: #1890ff">
                    {{ scope.row.driverName }}
                  </div>
                  <i class="iconfont icon-info" style="color: #1890ff"></i>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="age" label="年龄" width="60">
          </el-table-column>
          <el-table-column align="left" prop="phoneNumber" label="联系电话">
          </el-table-column>
          <el-table-column align="left" prop="vehicleInfo" label="绑定车辆">
          </el-table-column>
          <el-table-column align="left" prop="licenseLevel.message" label="准驾车型" width="80">
          </el-table-column>
        </el-table>
      </div>

      <div class="dialog_footer">
        <el-button class="cancelBtn2" @click="addDriverVisible = false">取 消</el-button>
        <el-button class="submitBtn2" type="primary" @click="driverVerify">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增线路/编辑线路 -->
    <el-dialog class="addDialog" :title="dialogRouteTitle" :visible.sync="visibleRouteBox" width="840px">
      <el-form :model="addRouteForm" :rules="addRouteRules" ref="addRouteForm" label-width="92px">
        <el-form-item label-width="0" prop="routeItem" v-for="(item, ItemIndex) in addRouteForm.routeItem"
          :key="ItemIndex">
          <div class="addRouteItem">
            <div class="formBox">
              <div style="width: 332px; margin-bottom: 10px">
                <el-form-item label="路线名称" prop="lineName">
                  <el-input placeholder="请输入" v-model="addRouteForm.routeItem[ItemIndex].lineName"></el-input>
                </el-form-item>
              </div>
              <el-form-item label="发货地" prop="departurePlaceTable">
                <el-table class="placeTableStyle" :header-cell-style="tableHeaderStyle40" :row-class-name="rowStyle"
                  :data="addRouteForm.routeItem[ItemIndex].departurePlaceTable">
                  <el-table-column align="center" label="序号" width="50">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.$index + 1 }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="地址" width="182px">
                    <template slot-scope="scope">
                      <el-form-item prop="">
                        <el-input class="inputAddress" placeholder="请输入发货地址"
                          @focus="isShowMap(scope.$index, '发货地', ItemIndex)" suffix-icon="el-icon-location-outline"
                          v-model="scope.row.address">
                        </el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="详细门牌号">
                    <template slot-scope="scope">
                      <el-form-item>
                        <el-input placeholder="请输入" v-model="scope.row.detail">
                        </el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="发货人">
                    <template slot-scope="scope">
                      <el-form-item>
                        <el-input v-model="scope.row.contact"> </el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="发货电话" width="103px">
                    <template slot-scope="scope">
                      <el-form-item>
                        <el-input placeholder="请输入" v-model="scope.row.phone">
                        </el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                      <i class="iconfontcolor icon-a- commonStyle" v-show="scope.$index == 0" @click="
                        addrouteData(
                          'DeparturePlace',
                          scope.$index,
                          ItemIndex
                        )
                        "></i>
                      <i class="iconfontcolor icon-a-- commonStyle" v-show="scope.$index > 0" @click="
                        deleteRoute('DeparturePlace', scope.$index, ItemIndex)
                        "></i>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>

              <el-form-item label="目的地" prop="destinationPlaceTable">
                <el-table class="placeTableStyle" :header-cell-style="tableHeaderStyle40" :row-class-name="rowStyle"
                  :data="addRouteForm.routeItem[ItemIndex].destinationPlaceTable
                    " :header-row-style="{ height: '40px' }" :row-style="{ height: '48px' }">
                  <el-table-column align="center" label="序号" width="50">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.$index + 1 }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="地址" width="182px">
                    <template slot-scope="scope">
                      <el-input placeholder="请输入收货地址" suffix-icon="el-icon-location-outline" v-model="scope.row.address"
                        @focus="isShowMap(scope.$index, '收货地', ItemIndex)">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="详细门牌号">
                    <template slot-scope="scope">
                      <el-input placeholder="请输入" v-model="scope.row.detail">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="收货人">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.contact"> </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="收货电话" width="103px">
                    <template slot-scope="scope">
                      <el-input placeholder="请输入" v-model="scope.row.phone">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                      <i class="iconfontcolor icon-a- commonStyle" v-show="scope.$index == 0" @click="
                        addrouteData('destination', ItemIndex, ItemIndex)
                        "></i>
                      <i class="iconfontcolor icon-a-- commonStyle" v-show="scope.$index > 0" @click="
                        deleteRoute('destination', scope.$index, ItemIndex)
                        "></i>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div style="display: flex; justify-content: flex-end">
        <el-button class="cancelBtn" @click="visibleRouteBox = false">取 消</el-button>
        <el-button class="submitBtn" type="primary" @click="addRouteSubmit()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 地址搜索 -->

    <el-dialog title="地址搜索" class="map_dialog" :visible.sync="VisibleMap" width="500px">
      <div class="mapBox">
        <div class="addMapBox">
          <iframe class="map" src="/orderMap.html" ref="iframeMap" frameborder="0" marginheight="0" marginwidth="0"
            scrolling="no"></iframe>
        </div>
        <div style="display: flex; justify-content: flex-end; margin-left: auto">
          <el-button class="cancelBtn" @click="VisibleMap = false">取 消</el-button>
          <el-button class="submitBtn" type="primary" @click="addsearchAddress()">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import titleBgVue from "@/components/titleBg.vue";
import httpApi from "@/http";
import { read, utils } from "xlsx";
export default {
  data() {
    return {
      projectNameValue: "",
      searchLineName: "",
      // 发货时间限制  发货时间不大于送达时间
      // <!-- formData.shippedTime  formData.finishTime-->

      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.formData.finishTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() >
              new Date(this.formData.finishTime).getTime() -
              1 * 24 * 60 * 60 * 1000
            );
          }
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 8.64e7 ||
            time.getTime() <
            new Date(this.formData.finishTime).getTime() +
            1 * 24 * 60 * 60 * 1000
          );
        },
      },

      key: "",
      DialogLine: false,
      DialogCar: false,
      DialogMap: false,
      DialogVisible: false,
      DialogItem: false,
      DialogAccept: false,
      DialogAcceptList: false,
      addDriverVisible: false, //添加司机弹框
      cargoDetailsVisible: false, //货物明细弹框
      cargoemood: [],
      itemmood: [],
      Acceptmood: [],
      Carmood: [],
      DialogAcceptmood: [],
      Linemood: [],
      // 交易信息 表单数据
      transactionForm: {
        huozhu: "",
        name: "",
        jijia: "",
        plan: "",
        jiliang: "",
        yunliang: "",
        danjia: "",
        money: "",
        carrierUunitPrice: "",
        carrierMoney: "",
      },
      transactionRules: {
        ownerId: [
          { required: true, message: "请点击右侧选择", trigger: "blur" },
        ],
        projectId: [
          { required: true, message: "请点击右侧选择", trigger: "blur" },
        ],
        pricingMethod: [{ required: true, message: "请输入", trigger: "blur" }],
        ownerProject: [{ required: false, message: "请输入", trigger: "blur" }],
        measureUnit: [{ required: true, message: "请输入", trigger: "blur" }],
        cargoWeight: [{ required: true, message: "请输入", trigger: "blur" }],
        ownerUnitPrice: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        totalAmount: [{ required: true, message: "请输入", trigger: "blur" }],
        unitPrice: [{ required: true, message: "请输入", trigger: "blur" }],
        shippedTime: [{ required: true, message: "请输入", trigger: "blur" }],
        freight: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      // 调度信息 表单数据
      SchedulingForm: {
        overTime: "",
        fahuoTime: "",
        shouHuoTime: "",
        Carrier: "",
        isDispatchingDriver: "1",
        DispatchingDriver: [],
        carType: "",
        beizhu: "",
      },
      DispatchingDriverDefalut: {
        serialNumber: "",
        name: "",
        carInfo: "",
        freightVolume: "",
        unit: "吨",
        DriverPrice: "",
        DriverFreight: "",
      },

      //收发货信息
      ShippingReceivingInfoForm: {
        selection: "",
        Distance: "8",
        sendOut: [],
        destination: [],
      },
      ShippingReceivingInfoRules: {},
      // 总数居列表
      setOutTableData: [],
      // 货物明细
      cargoDetailsData: [],
      LargeCategoryArr: [
        { value: 1, label: "建材" },
        { value: 2, label: "建材2" },
      ],
      jiliang: "",
      jiliangArr: [],
      jijia: "",
      jijiaArr: [
        { value: "1", label: "按里程" },
        { value: "2", label: "按量" },
      ],
      jiliangdawei: [
        { value: "1", label: "车" },
        { value: "2", label: "吨" },
        { value: "3", label: "件" },
      ],
      plan: "",
      planArr: [],

      driverDetailsData: [],
      SchedulingRules: {},
      formData: {
        ownerId: "", //货主ID
        projectId: "", //项目ID
        pricingMethod: "", //计价方式
        ownerProject: "", //计划名称
        measureUnit: "", //计量单位
        cargoWeight: "", //运量
        ownerUnitPrice: "", //货主单价
        totalAmount: "", //货主金额
        unitPrice: "", //司机单价
        shippedTime: "", //发货时间
        freight: "", //司机运费
        dispatchInfoDtoList: [], //调度信息
      },
      diverMood: "",

      SatrIndex: 0,
      EndIndex: 0,
      compute: false,
      selectRouteVisble: false, //选择线路显示
      multipleSelection: [], //存放选择的线路数组

      dirverList: [], //司机数据
      dirverIndex: "",

      /*    新增线路 数据分割线    */
      lineId: "",
      TableIndex: "",

      dialogRouteTitle: "添加线路",

      iframeWin: {}, //iframe绑定的页面的对象。
      detailsVisible: false,
      searchValue: "",
      VisibleMap: false,
      ItemIndex: "", //记录线路routeItem[序号]
      PlaceLabel: "", //记录 发货地 或 目的地
      index: "", //记录departurePlaceTable[序号] 或 destinationPlaceTable[序号]
      visibleRouteBox: false,
      addRouteForm: {
        //新增线路表单
        routeItem: [
          {
            lineName: "", //线路名称
            departurePlaceTable: [
              {
                address: "",
                detail: "",
                contact: "",
                phone: "",
                //addressType: "0",
                lat: "",
                lng: "",
              },
            ],
            destinationPlaceTable: [
              {
                address: "",
                detail: "",
                contact: "",
                phone: "",
                //addressType: "1",
                lat: "",
                lng: "",
              },
            ],
          },
        ],
      },
      addRouteRules: {
        lineName: [],
        destinationPlaceTable: [],
        departurePlaceTable: [],
      },

      //添加发货地 发货地默认空对象
      DepartureDefault: {
        //addressType: "0",
        address: "",
        detail: "",
        contact: "",
        phone: "",
        lat: "",
        lng: "",
      },

      // 目的地
      destinationDefault: {
        // addressType: "1",
        address: "",
        detail: "",
        contact: "",
        phone: "",
        lat: "",
        lng: "",
      },

      isRouteParamsFalse: true,
    };
  },
  created() { },
  methods: {
    tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
      return "font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F5F5F5;borderColor:#DDDDDD;height:48px;paddingTop:8px;paddingBottom:8px;";
    },
    tableHeaderStyle40({ row, column, rowIndex, columnIndex }) {
      return "font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F5F5F5;borderColor:#DDDDDD;height:40px;paddingTop:8px;paddingBottom:8px;";
    },
    rowStyle({ row, rowIndex }) {
      return "tableRowStyleName68";
    },

    clearShowAddDriver() {
      this.searchLineName = '',
        this.showAddDriver()
    },
    //获取线路数据
    async showAddDriver() {
      let that = this;
      if (!this.formData.ownerId) {
        this.$message.error("请先选择货主");
        return false;
      }
      let res = await this.$http.orderApi.changeLine({
        ownerId: this.formData.ownerId,
        lineName: this.searchLineName
      });
      this.Linemood = res.data.data;
      this.Linemood.map(item => {
        item.startAddress = item.startAddress.split(',')
        item.endAddress = item.endAddress.split(',')
      })
      // this.Linemood.startAddress=this.Linemood.startAddress.split(',')
      // this.Linemood.endAddress=this.Linemood.endAddress.split(',')
      //console.log(this.Linemood)
      this.selectRouteVisble = true;
    },
    //获取线路
    serMap() {
      let mood = this.$refs.iframe.selection;
      // ////console.log(this.$refs.iframe);
      ////console.log('获取线路保存', mood);
      mood.forEach((item, i) => {
        this.setOutTableData.push(item);
      });
      this.setOutTableData = JSON.parse(JSON.stringify(this.setOutTableData));
      ////console.log(this.setOutTableData);
      this.selectRouteVisble = false;
    },
    //删除地址
    DeletCargo(e) {
      this.setOutTableData.forEach((item, i) => {
        if (i == e) {
          this.setOutTableData.splice(i, 1);
        }
      });
    },

    // 计量单位变化时,表格的单位也变化
    changeMeasureUnit(val) {
      this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
        item.measureUnit = this.formData.measureUnit;
      });
    },

    //货物明细
    cargoVisible(e) {
      this.EndIndex = e;
      this.cargoDetailsVisible = true;
    },
    //下载模板
    Download() {
      const a = document.createElement("a");
      a.href = "/huowu.xlsx";
      a.download = "huowu.xlsx";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    //添加货物
    AddHuo() {
      this.setOutTableData[this.EndIndex].orderCargoDetails.push({
        cargoType: "", //大类
        cargoName: "", //名称
        cargoWeight: "", //运量cargoWeight
        brand: "", //品牌
        cargoVolume: "", //规格
        cargoQuantity: "", //货物数量
        description: "", //备注
      });
    },
    //删除货物行
    DeleteIndex(e) {
      this.setOutTableData[this.EndIndex].orderCargoDetails.forEach(
        (item, i) => {
          if (i == e) {
            this.setOutTableData[this.EndIndex].orderCargoDetails.splice(i, 1);
          }
        }
      );
    },
    //导入excel文档
    upload(file, fileList) {
      let files = { 0: file };
      this.readExcel1(files);
    },
    // 获取导入excel文档的数据
    readExcel1(files) {
      var that = this;
      ////console.log(files);
      // 此处判断不严谨，思路只是根据传入的参数校验数据的完整性，可根据自己需求修改
      // 如果没有文件名
      if (files.length <= 0) {
        return;
      }
      if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$Message.error("上传格式不正确，请上传xls或者xlsx格式");
        return;
      }
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = read(data, {
            type: "binary",
          });
          const wsname = workbook.SheetNames[0];
          const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
          let cont = JSON.stringify(ws)
            .replace(/大类/g, "cargoType")
            .replace(/货物名称/g, "cargoName")
            .replace(/运量/g, "cargoWeight")
            .replace(/品牌/g, "brand")
            .replace(/规格/g, "cargoVolume")
            .replace(/数量/g, "cargoQuantity")
            .replace(/备注/g, "description");
          this.setOutTableData[this.EndIndex].orderCargoDetails =
            JSON.parse(cont);
        } catch (e) {
          return false;
        }
      };
      fileReader.readAsBinaryString(files[0]);
    },
    qyxz(val) {
      if (val == '货主信息') {
        this.Selectcargoe();
      } else if (val == '项目信息') {
        this.Selectitem()
      }

    },
    //拿货主信息
    async Selectcargoe() {
      let res = await this.$http.orderApi.dropDownByOrder({
        name: this.key,
      });
      this.cargoemood = res.data.records;
      this.DialogVisible = true;
    },
    //选择货主
    cargoeXuan(e) {
      this.transactionForm.huozhu = e.name;
      this.formData.ownerId = e.ownerId;
      this.DialogVisible = false;
    },

    //拿项目信息
    async Selectitem() {
      if (!this.transactionForm.huozhu) {
        this.$message.error("请先选择货主");
        return false;
      }
      let res = await this.$http.orderApi.project_down({
        ownerId: this.formData.ownerId,
        name: this.projectNameValue
      });
      this.itemmood = res.data.records;
      this.DialogItem = true;
    },
    //选择项目
    ItemXuan(e) {
      this.transactionForm.name = e.name;
      this.formData.projectId = e.projectId;
      this.DialogItem = false;
      this.projectNameValue = ''
    },

    //获取车队列表
    async showAddDriverDialog(e) {
      let res = await this.$http.orderApi.addOrder();
      this.Acceptmood = res.data.data.records;
      this.DialogAcceptList = true;
      this.EndIndex = e;
      ////console.log(this.dirverIndex, this.EndIndex);
    },
    //获取司机列表
    async AcceptXuan(e) {
      let that = this;
      let res = await this.$http.orderApi.changeFleetDriver({
        fleetId: e.fleetId,
      });
      this.setOutTableData[this.EndIndex].fleetId = e.fleetId;
      this.driverDetailsData = res.data.data;
      this.addDriverVisible = true;
      if (this.dirverIndex == this.EndIndex) {
        setTimeout(() => {
          that.driverDetailsData.forEach((item) => {
            that.setOutTableData[that.dirverIndex].mood.forEach((metn) => {
              if (item.userId == metn.userId) {
                that.$refs.registTable.toggleRowSelection(item);
              }
            });
          });
        }, 500);
      }
    },
    //司机详情信息
    async diverShow(e) {
      ////console.log(e);
      let res = await this.$http.orderApi.detail({
        driverId: e,
      });
      this.diverMood = res.data.data;
    },
    //选择司机确认
    driverVerify() {
      this.dirverList = [];
      let mood = this.$refs.registTable.selection;
      mood.forEach((item, i) => {
        this.dirverList.push(item);
      });
      let obj = {};
      // 根据userId重复去重
      this.dirverList = this.dirverList.reduce(function (item, next) {
        obj[next.userId] ? "" : (obj[next.userId] = true && item.push(next));
        return item;
      }, []);
      let xuan = [];
      let show = true;
      if (this.dirverIndex == "0" || this.dirverIndex) {
        if (this.dirverIndex != this.EndIndex) {
          this.driverDetailsData.forEach((item, k) => {
            this.setOutTableData[this.dirverIndex].mood.forEach((metn) => {
              this.dirverList.forEach((res) => {
                if (
                  (res.userId == metn.userId) &
                  (metn.userId == item.userId)
                ) {
                  xuan.push(k);
                  show = false;
                }
              });
            });
          });
          if (!show) {
            xuan.forEach((item) => {
              this.$refs.registTable.setCurrentRow(
                this.driverDetailsData[item]
              );
            });
            this.$message.error("已有司机被选择");
            return false;
          }
        }
      }

      this.dirverIndex = this.EndIndex + "";
      this.setOutTableData[this.EndIndex].mood = this.dirverList;
      this.setOutTableData[this.EndIndex].driverId = "";
      this.setOutTableData[this.EndIndex].mood.forEach((item) => {
        this.setOutTableData[this.EndIndex].driverId += item.driverId + ",";
      });
      this.addDriverVisible = false;
      this.DialogAcceptList = false;
      this.setOutTableData = JSON.parse(JSON.stringify(this.setOutTableData));
    },
    //最好数据提交
    Submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let mood = JSON.parse(JSON.stringify(this.formData));
          let id = "";
          let panduan = true;
          this.setOutTableData.forEach((item, i) => {
            if (item.driverId == undefined) {
              panduan = false;
            }

            mood.dispatchInfoDtoList.push({
              lineId: item.lineId,
              appointSupplierId: item.fleetId,
              driverId: item.driverId
                ? item.driverId.slice(0, item.driverId.length - 1)
                : "",
              freight: item.freight,
              cargoWeight: item.cargoWeight,
              orderCargoDetails: item.orderCargoDetails,
            });
          });
          if (!panduan) {
            this.$message.error("请选择司机");
            return;
          }
          let res = this.$http.orderApi.addOrderList(mood).then(res => {
            if (res.data.code == 200) {
              this.$message.success("新增成功");
              this.$router.push("/home/selfOperatedOrder/List");
            }

          })
        } else {
          this.$message.error('请填写完整信息')
          return false;
        }
      });


    },

    /* 新增线路method---分割线 */
    showAddRouteDialog() {
      if (!this.formData.ownerId) {
        this.$message.error("请先选择货主");
        return false;
      }

      this.visibleRouteBox = true;
      this.dialogRouteTitle = "添加线路";

      //清空表单数据,确保空表单
      let { departurePlaceTable, destinationPlaceTable } =
        this.addRouteForm.routeItem[0];
      (this.addRouteForm.routeItem[0].lineName = ""),
        departurePlaceTable.forEach((item) => {
          for (let key in item) {
            item[key] = "";
          }
        });
      destinationPlaceTable.forEach((item) => {
        for (let key in item) {
          item[key] = "";
        }
      });
    },
    isShowMap(index, PlaceLabel, ItemIndex) {
      this.VisibleMap = true;
      //存放序号
      this.ItemIndex = ItemIndex;
      this.PlaceLabel = PlaceLabel;
      this.index = index;
    },
    addrouteData(params, scope, ItemIndex) {
      ////console.log('item', scope);

      const { departurePlaceTable, destinationPlaceTable } =
        this.addRouteForm.routeItem[ItemIndex];
      ////console.log(this.addRouteForm.routeItem[ItemIndex]);
      if (params == "DeparturePlace") {
        // 发货地
        //发货地表格加一行数据
        departurePlaceTable.push(
          JSON.parse(JSON.stringify(this.DepartureDefault))
        );
        //解决表格序号
      } else if (params == "destination") {
        destinationPlaceTable.push(
          JSON.parse(JSON.stringify(this.destinationDefault))
        );
      }
    },
    deleteRoute(params, index, ItemIndex) {
      const { departurePlaceTable, destinationPlaceTable } =
        this.addRouteForm.routeItem[ItemIndex];
      if (params == "DeparturePlace") {
        departurePlaceTable.splice(index, 1);
        departurePlaceTable.forEach((item, index) => { });
      } else if (params == "destination") {
        destinationPlaceTable.splice(index, 1);
        destinationPlaceTable.forEach((item, index) => { });
      }
    },
    // 回填地址信息到输入框  通过存放的序号 找到输入框回填数据
    addsearchAddress() {
      let mood = this.$refs.iframeMap.contentWindow.ToManualRoamFunc();

      ////console.log('ToManualRoamFunc', mood);
      localStorage.getItem("addressInfoItem", JSON.stringify(mood));

      ////console.log('拿到了吗', JSON.parse(localStorage.getItem('addressInfoItem')));
      if (!localStorage.getItem("addressInfoItem")) {
        this.$message.error("请搜索选择地址信息");
        return;
      }

      const { lat, lng, address } = JSON.parse(
        localStorage.getItem("addressInfoItem")
      );

      if (this.PlaceLabel == "发货地") {
        ////console.log(this.addRouteForm.routeItem[this.ItemIndex].destinationPlaceTable[this.index]);
        localStorage.removeItem("addressInfoItem");
        this.addRouteForm.routeItem[this.ItemIndex].departurePlaceTable[
          this.index
        ].address = address;
        this.addRouteForm.routeItem[this.ItemIndex].departurePlaceTable[
          this.index
        ].lng = lng;
        this.addRouteForm.routeItem[this.ItemIndex].departurePlaceTable[
          this.index
        ].lat = lat;
      } else if ((this.PlaceLabel = "目的地")) {
        this.addRouteForm.routeItem[this.ItemIndex].destinationPlaceTable[
          this.index
        ].address = address;
        this.addRouteForm.routeItem[this.ItemIndex].destinationPlaceTable[
          this.index
        ].lng = lng;
        this.addRouteForm.routeItem[this.ItemIndex].destinationPlaceTable[
          this.index
        ].lat = lat;
        ////console.log('目的地数据', this.addRouteForm.routeItem[this.ItemIndex].destinationPlaceTable);
        localStorage.removeItem("addressInfoItem");
      }
      this.VisibleMap = false;
    },
    getEmitRouteDetails(lineId, tableIndex) {
      this.tableIndex = tableIndex;

      this.lineId = lineId;
      ////console.log('表单', this.addRouteForm.routeItem[0]);
      this.dialogRouteTitle = "编辑线路";
      ////console.log('编辑路线回填请求传参', { lineId: lineId });
      httpApi.selfOperatedSettingsApi
        .getRouteDetails({ lineId })
        .then((res) => {
          //删除多余参数
          res.data.data;
          delete res.data.data.updateTime;
          delete res.data.data.name;
          delete res.data.data.updateBy;
          delete res.data.data.tags;
          delete res.data.data.remark;
          ////console.log('编辑路线回填res', res);

          ////console.log(this.addRouteForm.routeItem[0]);
          for (let k in this.addRouteForm.routeItem[0]) {
            for (let i in res.data.data) {
              if (k == i) {
                this.addRouteForm.routeItem[0][k] = res.data.data[i];
                //////console.log('回填测试',this.addRouteForm.routeItem[0][k], res.data.data[i]);
              }
            }
          }
          this.visibleRouteBox = true;
        });
    },
    yanzhengParams(params) {
      params.startAddressList.forEach((item) => {
        delete item.tags;
        delete item.name;
        delete item.remark;
        for (let key in item) {
          //key为在遍历对象中的每一个属性的属性名  term[key]为在遍历对象中的每一个key属性名对应的属性值 term为被遍历的对象
          if (item[key] === "") {
            //this.$message.error('请填写完整信息')
            this.isRouteParamsFalse = true;
            return;
          } else if (item[key] != "") {
            this.isRouteParamsFalse = false;
          }
        }
      });
      params.endAddressList.forEach((item) => {
        delete item.tags;
        delete item.name;
        delete item.remark;
        for (let key in item) {
          //key为在遍历对象中的每一个属性的属性名  term[key]为在遍历对象中的每一个key属性名对应的属性值 term为被遍历的对象
          if (item[key] === "") {
            this.isRouteParamsFalse = true;
            return;
          } else if (item[key] != "") {
            this.isRouteParamsFalse = false;
          }
        }
      });
    },
    addRouteSubmit() {
      let params = {
        lineName: this.addRouteForm.routeItem[0].lineName,
        startAddressList: this.addRouteForm.routeItem[0].departurePlaceTable,
        endAddressList: this.addRouteForm.routeItem[0].destinationPlaceTable,
        ownerId: this.formData.ownerId,
      };
      ////console.log('添加线路请求传参表单', params);

      //线路不为空验证
      if (params.lineName == "") {
        this.$message.error("请填写路线名称");
        return;
      }

      this.yanzhengParams(params);
      if (this.isRouteParamsFalse == true) {
        this.$message.error("请填写完整信息");
        return;
      }

      //添加线路请求
      if (this.dialogRouteTitle == "添加线路") {
        httpApi.selfOperatedSettingsApi.addRouteInfo(params).then((res) => {
          ////console.log('添加线路响应res', res);
          if (res.data.code == 200) {
            this.$message.success("添加线路成功");
            let startAddress = "";
            let endAddress = "";
            //发货地   拿到地址并拼多个地址 拼接字符串
            this.addRouteForm.routeItem[0].departurePlaceTable.forEach(
              (item) => {
                startAddress += item.address + ",";
              }
            ),
              (startAddress = startAddress.slice(0, -1));
            //目的地
            this.addRouteForm.routeItem[0].destinationPlaceTable.forEach(
              (item) => {
                endAddress += item.address + ",";
              }
            );
            (endAddress = endAddress.slice(0, -1)), //目的地
              this.setOutTableData.push({
                startAddress: startAddress,
                endAddress: endAddress,
                lineId: res.data.msg,
                lineName: this.addRouteForm.routeItem[0].lineName,
              });

            this.visibleRouteBox = false;
          }
        });
      } else if (this.dialogRouteTitle == "编辑线路") {
        params.lineId = this.lineId;
        ////console.log('编辑线路传参', params);
        httpApi.selfOperatedSettingsApi.UpdateRoute(params).then((res) => {
          ////console.log('编辑线路响应res', res);
          if (res.data.code == 200) {
            this.$message.success("编辑线路成功");

            let startAddress = "";
            let endAddress = "";
            //发货地   拿到地址并拼多个地址 拼接字符串
            this.addRouteForm.routeItem[0].departurePlaceTable.forEach(
              (item) => {
                startAddress += item.address + ",";
              }
            ),
              (startAddress = startAddress.slice(0, -1));
            //目的地
            this.addRouteForm.routeItem[0].destinationPlaceTable.forEach(
              (item) => {
                endAddress += item.address + ",";
              }
            );
            (endAddress = endAddress.slice(0, -1)), //目的地
              (this.setOutTableData[this.tableIndex].startAddress =
                startAddress);
            this.setOutTableData[this.tableIndex].endAddress = endAddress;
            this.setOutTableData[this.tableIndex].lineId = this.lineId;
            this.setOutTableData[this.tableIndex].lineName =
              this.addRouteForm.routeItem[0].lineName;
            //////console.log('总表格',this.setOutTableData);
            this.visibleRouteBox = false;
          }
        });
      }
    },
  },
  mounted() { },
  components: {
    breadcrumb,
    titleBgVue,
  },
};
</script>

<style lang="scss" scoped>
.controlLine {
  height: 76px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;


  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 23px;

    >.title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    >.inputBox {
      width: 160px;

      .select {
        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.Box {
  background-color: #fff;

  .header {
    height: 50px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    padding-left: 24px;
  }

  .main {
    padding: 34px 24px 52px;
    height: calc(100vh - 258px);
    overflow-y: scroll;

    .main_item {
      .addDriverBtn {
        background-color: #1890ff;
        border-radius: 4px;
        height: 32px;
        width: 80px;
        color: #ffffff;
        font-size: 12px;
        transition: 0.2s;
        cursor: pointer;
        margin-right: 17px;

        .iconBtn {
          margin-right: 7px;
          font-size: 15px;
        }

        &:hover {
          opacity: 0.8;
        }
      }

      .formItem {
        padding-top: 28px;

        ::v-deep .el-form-item__label {
          color: #262626;
          font-size: 12px;
          font-weight: bold;
          // height:32px;
          // line-height: 40px;

        }

        .input_form {
          ::v-deep .el-select {
            width: 100%;
          }
        }

        //选择车型
        .carTypeSelect {
          ::v-deep .el-select {
            width: 240px;
          }

          // 车辆照片
          .carPicBox {
            position: absolute;
            top: calc(100% + 8px);
            width: 240px;
            height: 161px;
            margin: 0 auto;

            .imgBg {
              background-color: #f5f5f5;
              width: 240px;
              height: 105px;

              .carPic {
                width: 240px;
                height: 105px;
                display: block;
              }
            }

            .infoBox {
              padding-top: 13px;
              border: 1px solid #f0f0f0;
              height: 56px;
              display: flex;
              justify-content: space-around;

              .info_item {
                display: flex;
                flex-direction: column;

                .info_item_tit {
                  color: #949494;
                  font-size: 12px;
                  line-height: 16px;
                }

                .text {
                  color: #262626;
                  font-size: 12px;
                  line-height: 16px;
                }
              }
            }
          }
        }

        // 订单备注
        .notesInput {
          width: 240px;
        }

        .addDriverBox {
          background-color: #f8f8f8;
          width: 100%;
          padding: 0 17px 19px;

          .addDriverBox_head {
            width: 100%;
            height: 57px;
            display: flex;
            align-items: center;

            .addDriverBtn {
              background-color: #1890ff;
              border-radius: 4px;
              height: 32px;
              width: 105px;
              color: #ffffff;
              font-size: 12px;
              padding: 8px 17px 9px 17px;
              transition: 0.2s;
              cursor: pointer;
              margin-right: 17px;

              .iconBtn {
                margin-right: 7px;
                font-size: 15px;
              }

              &:hover {
                opacity: 0.8;
              }
            }
          }
        }
      }
    }
  }
}

.footerControlBox {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 300;
  bottom: -16px;
  left: -16px;
  justify-content: center;
  height: 60px;
  width: calc(100% + 32px);
  background-color: #fff;
  margin-top: 28px;

  .cancelBtn {
    width: 80px;
    height: 36px;
    border: 1px solid #d9d9d9;
    color: #262626;
    font-size: 12px;
    border-radius: 4px;
    background-color: #fff;
    margin-right: 16px;

    &:hover {
      opacity: 0.8;
      transition: 0.2;
    }
  }

  .submitBtn {
    background-color: #1890ff;
    width: 80px;
    height: 36px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
  }

  &:hover {
    opacity: 0.8;
    transition: 0.2;
  }
}

// 添加司机对话框
.addDriver_dialog {
  .dialog_footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 80px;
    padding: 20px 0 24px;

    .cancelBtn2 {
      width: 80px;
      height: 36px;
      border: 1px solid #d9d9d9;
      color: #262626;
      font-size: 12px;
      border-radius: 4px;
      background-color: #fff;
      margin-right: 14px;

      &:hover {
        opacity: 0.8;
        transition: 0.2;
      }
    }

    .submitBtn2 {
      background-color: #1890ff;
      width: 80px;
      height: 36px;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
    }

    &:hover {
      opacity: 0.8;
      transition: 0.2;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 31px 40px 24px 40px;
  }

  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
  }

  .titleBox {
    display: flex;
    margin-bottom: 17px;

    .title {
      color: #262626;
      font-size: 12px;
    }
  }

  .dialog_list {
    border: 1px solid #f0f0f0;
    border-bottom: none;

    .driverPicBox {
      height: 48px;
      width: 65px;
      background-color: #f1f0f0;

      .driverImg {
        height: 48px;
        width: 65px;
      }
    }

    .driverNameBox {
      display: flex;

      .driverName {
        color: #595959;
        font-size: 12px;
        margin-right: 5px;
      }

      .icon-info {
        font-size: 13px;
        color: #595959;
      }
    }

    // 表头样式
    ::v-deep .el-table__header th {
      padding: 8px 0;
    }

    ::v-deep .el-table__header th {
      background-color: #f5f5f5;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: left;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #262626;
        font-size: 12px;
      }
    }

    // 表身体
    ::v-deep .el-table__row {
      height: 76px;
    }

    ::v-deep .el-table-column--selection .cell {
      padding-left: 16px;
      padding-right: 16px;
    }
  }
}

// 货物明细弹框
.cargoDetails_dialog {
  .head {
    .importBtn {
      margin-bottom: 9px;
      width: 120px;
      height: 36px;
      background-color: #1890ff;
      color: #fff;
      font-size: 12px;

      &:hover {
        opacity: 0.8s;
        transition: 0.2s;
      }
    }
  }

  .dialog_footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 80px;
    padding: 20px 0 24px;

    .cancelBtn3 {
      width: 80px;
      height: 36px;
      border: 1px solid #d9d9d9;
      color: #262626;
      font-size: 12px;
      border-radius: 4px;
      background-color: #fff;
      margin-right: 14px;

      &:hover {
        opacity: 0.8;
        transition: 0.2s;
      }
    }

    .submitBtn3 {
      background-color: #1890ff;
      width: 80px;
      height: 36px;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
    }

    &:hover {
      opacity: 0.8;
      transition: 0.2s;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 22px 32px 24px 32px;
  }

  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
  }

  .cargoDetails_table {
    border: 1px solid #f0f0f0;
    border-bottom: none;
  }
}

.flex-fpkp {
  display: flex;
  margin-bottom: 15px;
}

.cxbt {
  margin-left: 20px;
}

#selectRouteBox {
  ::v-deep .el-table__body-wrapper {
    height: 500px !important;
    overflow-y: scroll !important;
  }
}
</style>

<style lang="scss">
// 司机信息和车辆信息
.BulletBox {
  padding: 18px 12px;

  >.info_item {
    >.titleBox {
      display: flex;
      align-items: center;
      margin-bottom: 14px;

      >.icon-xinxi {
        font-size: 16px;
        margin-right: 7px;
      }

      >.title {
        color: #262626;
        font-size: 14px;
        margin-right: 14px;
      }

      >.line {
        height: 1px;
        flex: 1;
        background-color: #f0f0f0;
      }
    }
  }
}

.null-png {
  height: 300px;
  width: 100%;
  font-weight: 600;
  display: flex;
  justify-content: center;
}

.null-png div {
  text-align: center;
}

.fpkp-dialog {
  padding-bottom: 30px;
}

.importBtn1 {
  width: 120px;
  font-size: 12px;
}

.addRouteBtn {
  background-color: #1890ff;
  border-radius: 4px;
  height: 32px;
  width: 105px;
  color: #ffffff;
  font-size: 12px;
  padding: 8px 17px 9px 17px;
  transition: 0.2s;
  cursor: pointer;
  margin: 0px 0 16px 0;

  .iconBtn {
    margin-right: 7px;
    font-size: 15px;
  }

  &:hover {
    opacity: 0.8;
  }
}

.addRouteItem {
  .formBox {
    padding: 23px 42px 31px 0px;
    overflow-y: scroll;
    width: 100%;

    ::v-deep .el-table__header th {
      background-color: #f5f5f5;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: center;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #666666;
        font-size: 12px;
      }
    }

    //   表单
    ::v-deep .el-form-item__label {
      line-height: 32px;
      font-size: 12px;
      color: #262626;
      padding-top: 4px;
    }

    ::v-deep .el-input__inner {
      line-height: 32px;
      height: 32px;
      //padding: 0 20px 0 10px;
    }

    // 发货地 目的地表格样式
    .placeTableStyle {
      // ::v-deep .el-table .el-table__cell {
      //   padding: 0px;
      // }

      ::v-deep .addRoute_dialog .formBox[data-v-626ecdae] .el-table__header th {
        height: 40px;
      }

      ::v-deep .el-input__icon {
        line-height: 0;
      }

      .commonStyle {
        font-size: 19px;
        cursor: pointer;
        transition: 0.2s;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}

.map_dialog {
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    color: #262626;
    font-size: 14px;
    height: 50px;
    display: flex;
    align-items: center;
    font-weight: bold;
  }

  //关闭图标
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 15px;
  }

  ::v-deep .el-dialog__body {
    padding: 6px 7px;
  }

  .mapBox {
    display: flex;
    flex-direction: column;
    align-items: center;

    .addMapBox {
      margin-bottom: 15px;

      .map {
        width: 486px;
        height: 372px;
      }
    }
  }
}

.routeLine_1 {
  display: flex;
  overflow: hidden;
  //width: 140px;
  margin: 0px auto;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

<style lang="scss">
.tableRowStyleName {
  height: 68px !important;
  color: #262626 !important;
  font-size: 12px;
  padding: 0px;
}
</style>
